//封装一个通过id取DOM对象的函数
function $(id) {
    return document.getElementById(id);
}
class Zoom {
    constructor() {
        this.zoomBox = $("zoomBox");
        this.mid = $("mid");
        this.midImg = this.mid.children[0];
        this.zoom = $("zoom");
        this.big = $("big");
        this.bigImg = this.big.children[0];
        this.small = $("small");
        this.smallImgs = this.small.children;
        this.move();
    }
    move() {
        this.mid.onmouseover = () => {
            this.zoom.style.display = "block";
            this.big.style.display = "block";
        };
        this.mid.onmouseout = () => {
            this.zoom.style.display = "none";
            this.big.style.display = "none";
        };
        this.mid.onmousemove = (e) => {
            let evt = e || event;
            //事件源会改变
            //let x = evt.offsetX - this.zoom.offsetWidth / 2;
            //let y = evt.offsetY - this.zoom.offsetHeight / 2;
            let maxW = this.mid.offsetWidth - this.zoom.offsetWidth;
            let maxH = this.mid.offsetHeight - this.zoom.offsetHeight;

            let x =
                evt.pageX - this.zoomBox.offsetLeft - this.zoom.offsetWidth / 2;
            let y =
                evt.pageY - this.zoomBox.offsetTop - this.zoom.offsetHeight / 2;

            x = x <= 0 ? 0 : x >= maxW ? maxW : x;
            y = y <= 0 ? 0 : y >= maxH ? maxH : y;

            this.zoom.style.left = x + "px";
            this.zoom.style.top = y + "px";

            this.bigImg.style.left = -2 * x + "px";
            this.bigImg.style.top = -2 * y + "px";
        };
        for (let i = 0; i < this.smallImgs.length; i++) {
            this.smallImgs[i].onclick = () => {
                this.midImg.src = this.bigImg.src = this.smallImgs[i].src;
            };
        }
    }
}
new Zoom();